<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Color Picker - http://beben-koben.blogspot.com/</title>
	<link href='http://1.bp.blogspot.com/-295XmmdM0KM/UZ9hLBFBTAI/AAAAAAAAByo/SFEnCuxspj8/s1600/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<style>
.z8{margin-left:8px;}
.z7{margin-left:7px;}
.z6{margin-left:6px;}
.z5{margin-left:5px;}
.z4{margin-left:4px;}
.z3{margin-left:3px;}
.z2{margin-left:2px;}
.z1{margin-left:1px;}
.d1,.d2,.d3,.d4,.d5,.d6,.d7,.d8, .z1,.z2,.z3,.z4,.z5,.z6,.z7,.z8  {
 overflow:hidden;
 border-left:1px solid #cfcfcf;
 border-right:1px solid #cfcfcf;
 height:1px;
 background-color:#cfcfcf;
 }
.d8{margin-right:8px}
.d7{margin-right:7px;}
.d6{margin-right:6px;}
.d5{margin-right:5px;}
.d4{margin-right:4px;}
.d3{margin-right:3px;}
.d2{margin-right:2px;}
.d1{margin-right:1px;}
.wl{ width: 489px;
  margin:10px;
}
.la{ float: left;
   width: 270px;
   }
.ra{float: left;width: 50px;}
.rr{float:left;width:80px;margin-top:30px}
.hsv{float:right;width:80px;margin-top:30px;height:250px}
.wrapper{  
  width: 690px;
  margin: 0px;
  overflow-y:scroll;
  background-color:#E6E6E6;
  height:300px
}
.wrapper1{  
  width: 690px;
  margin: 0px;
  background-color:#E6E6E6;
}
.lft{
	float: left;
	margin-right:1px;
	width: 165px;
}
.out{margin:0px auto;width:690px;}
.rrl{float:left;width:20px;height:30px}
.rrr{float:left;width:45px;height:30px}
.rra{float:right;width:10px;color:red;height:30px;font-weight:bold}
.rrr input{width:30px}
#hex,#nm{width:50px}
.rrw{float:left;width:50px;height:30px;text-align:right}
#clbx{height:55px;width:55px;margin-top:15px;float:left}
.arrowboxd{width:9px;font-size:1px;position:absolute;}
.arrows{width:8px;height:8px;position:absolute;background-color:#6699cc;border:1px solid #fff;overflow:hidden}
#wp{float:left;height:256px;width: 256px; }
#wp div{
   width: 256px;   
   height:4px;  
}
#wp em{
font-size:1px;
display:block;
width: 4px;
height: 4px;
float:left;
}
#wt {float:left;height:256px;}
#wt em{
font-size:1px;
display:block;
width: 8px;
height: 4px;
}
#wp div b{
font-size:1px;
overflow:hidden;
display:block;
width: 4px;
height: 4px;
float:right
}
.cl {width:18px; height:18px;margin:0px 5px 0px 1px;float:left;overflow:hidden;background-color: #828282; }
.wrapper a,.blka,.wrapper a.visited{
clear:both;
display:block;
text-decoration:none;
cursor: pointer; 
font: bold 0.9em  arial;
color:#00008b;
padding:2px 0px
}
.wrapper a:hover{background-color:#ffc0cb}
.a55, .a54, .a53, .a52, .a51
 {overflow:hidden;}
.a55 { height:1px;
       margin:0 1px;}        
.a54 { height:1px;
       margin:0 1px;}
.a53 { height:1px;
       margin:0 2px;}
.a52 { height:1px;
       margin:0 3px;
       border-width: 2px}
.a51 { height:1px;
       margin:0 5px;background:#999;}
.dh {background-color:#e6e6fa }
.aa51 { height:1px;
         margin:0 5px;
         overflow:hidden}
.header{width:100%;background-color:#e6e6e6;padding:0px 0px}
.subhd,h2{color:#00008c;font: bold Arial;margin:0px 20px 0px 20px;padding:0px;}
.subhd{font-style:italic;margin-top:5px}
.pic{background-color:#e6e6fa;width:100%;float:left;padding-bottom:5px}
body {
   padding: 0px ;
   margin: 10px 0px 10px 0px;
   font-size: 90%;
   background-color: #2f4f4f
}
a {text-decoration:none;
cursor: default; 
font: bold 0.9em  arial;
color:#a9a9a9;
padding:2px 0px
}
a:hover{text-decoration:underline;color:#ffffe0 }
.hm{margin:10px 0px 0px 20px}
.hm a {display: block; 
   padding: 5px 0px; margin: 0 0 1px;  
   text-decoration: none; color:#a9a9a9;
  cursor: default; 
   }
  .hm a:hover{color:#fff} 
.footer{clear:both;text-align:center;color:#a9a9a9;margin:5px}
.int{width:60px}
.coin{margin:5px}
h4{margin-left:5px}
.ads0 {width:236px;margin: 10px 0px 10px 15px}
</style>
    <script type="text/javascript">
   
window.onload = function(){
col();
//vertical();
vdrag();
startdrag();
adda();
}
function vertical() {

 var e=document.createElement("em");
  $("wt").appendChild(e);

}

function col() {
var co = $("wp");
var vo = $("wt");

for (var j=0; j <64; j++){
    for (var i=0; i <64; i++){
    var e=document.createElement("em");
    
    e.style.backgroundColor = 'rgb('+j*4+','+i*4+',0)';
    co.appendChild(e);
     
    }
 var f=document.createElement("em");
 f.style.backgroundColor = 'rgb('+0*4+','+0*4+','+j*4+')';
 vo.appendChild(f);
 
}
}
function getTargetElement(evt) {
    var elem = (evt.target) ? ((evt.target.nodeType == 3) ? evt.target.parentNode : evt.target) : evt.srcElement;
    return elem;
}

function colorrefreshv(h,k) {
var co = $("wt");
var ems =co.getElementsByTagName("em");
for (var i=0; i <64; i++){ 
 ems[i].style.backgroundColor = 'rgb('+h+','+k+','+i*4+')';
}
}

function colorrefresh(b) {

var co = $("wp");
var ems =co.getElementsByTagName("em");

for (var j=0; j <64; j++){
 
    for (var i=0; i <64; i++){  
    ems[ 64*j+i].style.backgroundColor = 'rgb('+j*4+','+i*4+','+b+')';

  }
}
}

function stepact(e) {
 e = (e) ? e : ((window.event) ? window.event : "");
 var elem = getTargetElement(e);
 var ep = (elem.className =="arrowboxd") ? elem : elem.parentNode;
 var epc = $$(ep,"div");
 var l =epc.length;
 
 if (e.type == "mouseover") {
 for (var i=0; i < l-1; i++) {
 epc[i].style.backgroundColor = "#6699cc";
 epc[i].style.borderLeft ="solid 1px #6699cc";
 epc[i].style.borderRight ="solid 1px #6699cc";
 }
 epc[l-1].style.backgroundColor = "#6699cc";
 
 }
 if (e.type == "mouseout") {
 for (var i=0; i < l-1; i++) {
 epc[i].style.backgroundColor = "#cfcfcf";
 epc[i].style.borderLeft ="solid 1px #cfcfcf";
 epc[i].style.borderRight ="solid 1px #cfcfcf";
 }
 epc[l-1].style.backgroundColor = "#cfcfcf";
 
 }
 
 }

function vdrag() {
var e=getElementsByClass("arrowboxd");
    e[0].onmouseover = stepact;
    e[0].onmouseout = stepact;
    e[0].onclick = stepact;
}

function c(tag) {
return document.createElement(tag);
}

function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}

function $$(e,tag) {return e.getElementsByTagName(tag);}

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}


function realToDec( n ) {
	return Math.min( 255, Math.round( n * 256 ) );
}
	
function hsvToRgb( h, s, v ) {
	var r, g, b, i, f, p, q, t;
	   i = Math.floor( ( h / 60 ) % 6 );
	    f = ( h / 60 ) - i;
	    p = v * ( 1 - s );
	    q = v * ( 1 - f * s );
	    t = v * ( 1 - ( 1 - f ) * s );
	    switch(i) {
        case 0: r=v; g=t; b=p; break;
	        case 1: r=q; g=v; b=p; break;
	        case 2: r=p; g=v; b=t; break;
	        case 3: r=p; g=q; b=v; break;
	        case 4: r=t; g=p; b=v; break;
	        case 5: r=v; g=p; b=q; break;
	    }
return "rgb("+realToDec(r)+","+ realToDec(g)+","+ realToDec(b)+")";
}

function RGBColor(color_string)
{
    this.ok = false;

     color_string = color_string.replace(/\#?/,"");

    color_string = color_string.toLowerCase();
    this.simple_colors = {
        aliceblue: 'f0f8ff',
        antiquewhite: 'faebd7',
        aqua: '00ffff',
        aquamarine: '7fffd4',
        azure: 'f0ffff',
        beige: 'f5f5dc',
        bisque: 'ffe4c4',
        black: '000000',
        blanchedalmond: 'ffebcd',
        blue: '0000ff',
        blueviolet: '8a2be2',
        brown: 'a52a2a',
        burlywood: 'deb887',
        cadetblue: '5f9ea0',
        chartreuse: '7fff00',
        chocolate: 'd2691e',
        coral: 'ff7f50',
        cornflowerblue: '6495ed',
        cornsilk: 'fff8dc',
        crimson: 'dc143c',
        cyan: '00ffff',
        darkblue: '00008b',
        darkcyan: '008b8b',
        darkgoldenrod: 'b8860b',
        darkgray: 'a9a9a9',
        darkgreen: '006400',
        darkkhaki: 'bdb76b',
        darkmagenta: '8b008b',
        darkolivegreen: '556b2f',
        darkorange: 'ff8c00',
        darkorchid: '9932cc',
        darkred: '8b0000',
        darksalmon: 'e9967a',
        darkseagreen: '8fbc8f',
        darkslateblue: '483d8b',
        darkslategray: '2f4f4f',
        darkturquoise: '00ced1',
        darkviolet: '9400d3',
        deeppink: 'ff1493',
        deepskyblue: '00bfff',
        dimgray: '696969',
        dodgerblue: '1e90ff',
        feldspar: 'd19275',
        firebrick: 'b22222',
        floralwhite: 'fffaf0',
        forestgreen: '228b22',
        fuchsia: 'ff00ff',
        gainsboro: 'dcdcdc',
        ghostwhite: 'f8f8ff',
        gold: 'ffd700',
        goldenrod: 'daa520',
        gray: '808080',
        green: '008000',
        greenyellow: 'adff2f',
        honeydew: 'f0fff0',
        hotpink: 'ff69b4',
        indianred : 'cd5c5c',
        indigo : '4b0082',
        ivory: 'fffff0',
        khaki: 'f0e68c',
        lavender: 'e6e6fa',
        lavenderblush: 'fff0f5',
        lawngreen: '7cfc00',
        lemonchiffon: 'fffacd',
        lightblue: 'add8e6',
        lightcoral: 'f08080',
        lightcyan: 'e0ffff',
        lightgoldenrodyellow: 'fafad2',
        lightgrey: 'd3d3d3',
        lightgreen: '90ee90',
        lightpink: 'ffb6c1',
        lightsalmon: 'ffa07a',
        lightseagreen: '20b2aa',
        lightskyblue: '87cefa',
        lightslateblue: '8470ff',
        lightslategray: '778899',
        lightsteelblue: 'b0c4de',
        lightyellow: 'ffffe0',
        lime: '00ff00',
        limegreen: '32cd32',
        linen: 'faf0e6',
        magenta: 'ff00ff',
        maroon: '800000',
        mediumaquamarine: '66cdaa',
        mediumblue: '0000cd',
        mediumorchid: 'ba55d3',
        mediumpurple: '9370d8',
        mediumseagreen: '3cb371',
        mediumslateblue: '7b68ee',
        mediumspringgreen: '00fa9a',
        mediumturquoise: '48d1cc',
        mediumvioletred: 'c71585',
        midnightblue: '191970',
        mintcream: 'f5fffa',
        mistyrose: 'ffe4e1',
        moccasin: 'ffe4b5',
        navajowhite: 'ffdead',
        navy: '000080',
        oldlace: 'fdf5e6',
        olive: '808000',
        olivedrab: '6b8e23',
        orange: 'ffa500',
        orangered: 'ff4500',
        orchid: 'da70d6',
        palegoldenrod: 'eee8aa',
        palegreen: '98fb98',
        paleturquoise: 'afeeee',
        palevioletred: 'd87093',
        papayawhip: 'ffefd5',
        peachpuff: 'ffdab9',
        peru: 'cd853f',
        pink: 'ffc0cb',
        plum: 'dda0dd',
        powderblue: 'b0e0e6',
        purple: '800080',
        red: 'ff0000',
        rosybrown: 'bc8f8f',
        royalblue: '4169e1',
        saddlebrown: '8b4513',
        salmon: 'fa8072',
        sandybrown: 'f4a460',
        seagreen: '2e8b57',
        seashell: 'fff5ee',
        sienna: 'a0522d',
        silver: 'c0c0c0',
        skyblue: '87ceeb',
        slateblue: '6a5acd',
        slategray: '708090',
        snow: 'fffafa',
        springgreen: '00ff7f',
        steelblue: '4682b4',
        tan: 'd2b48c',
        teal: '008080',
        thistle: 'd8bfd8',
        tomato: 'ff6347',
        turquoise: '40e0d0',
        violet: 'ee82ee',
        violetred: 'd02090',
        wheat: 'f5deb3',
        white: 'ffffff',
        whitesmoke: 'f5f5f5',
        yellow: 'ffff00',
        yellowgreen: '9acd32'
    };
            
    for (var key in this.simple_colors) {
        if (color_string==key) {
			color_string = this.simple_colors[key];
        }      
        if ( color_string==this.simple_colors[key]) {
        this.name = key;
        
        }
    }
    
      
    var color_defs = [
        {
            //re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
            re: /^rgb\((1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2}),(1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2}),(1[0-9]{2}|25[0-5]|2[0-4]\d|\d{1,2})\)$/,
            example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
            process: function (bits){
                return [
                    parseInt(bits[1]),
                    parseInt(bits[2]),
                    parseInt(bits[3])
                ];
            }
        },
        {
            re: /^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/,
            example: ['#00ff00', '336699'],
            process: function (bits){
                return [
                    parseInt(bits[1], 16),
                    parseInt(bits[2], 16),
                    parseInt(bits[3], 16)
                ];
            }
        },
        {
            re: /^([a-f0-9])([a-f0-9])([a-f0-9])$/,
            example: ['#fb0', 'f0f'],
            process: function (bits){
                return [
                    parseInt(bits[1] + bits[1], 16),
                    parseInt(bits[2] + bits[2], 16),
                    parseInt(bits[3] + bits[3], 16)
                ];
            }
        }
    ];

    // search through the definitions to find a match
    for (var i = 0; i < color_defs.length; i++) {
        var re = color_defs[i].re;
        var processor = color_defs[i].process;
        var bits = re.exec(color_string);
        if (bits) {
            channels = processor(bits);
            this.r = channels[0];
            this.g = channels[1];
            this.b = channels[2];
            this.ok = true;
           
        }

    }

    this.toRGB = function () {
        return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
    }
    this.toHex = function () {
        var r = this.r.toString(16);
        var g = this.g.toString(16);
        var b = this.b.toString(16);
        if (r.length == 1) r = '0' + r;
        if (g.length == 1) g = '0' + g;
        if (b.length == 1) b = '0' + b;
        return '#' + r + g + b;
    }
  
this.toHsv= function () {
   var red = this.r;
   var green = this.g;
   var blue = this.b;
   var hue,sat,lumin;
   var  min = Math.min( Math.min( red, green ), blue );
   var max = Math.max( Math.max( red, green ), blue );
   var delta = (max - min);
   if (max != 0) {
      // calculate saturation & luminence
      sat = delta / max; 
      lumin = max / 255;
      // calculate hue: first, adjustments to fix if(...) errors
         delta = delta+0;
         red = red+0;
         green = green+0;
         blue = blue+0;
      if ( delta != 0 ) {
         if (red==max) {
            hue = (green - blue) / delta;
         } else if (green==max) {
            hue = 2 + ((blue - red) / delta);
         } else {
            hue = 4 + ((red - green) / delta);
         }
      }
      hue = hue * 60;
      if (hue < 0) hue = hue + 360;
   }
 return [Math.round(hue),Math.round(sat * 100),Math.round(lumin * 100)];
}

   
    
}

function gopos() {
b = parseInt(b);
r =parseInt(r);
g = parseInt(g);
$("dv").style.top = b + parseInt(ctop) +"px";
$("ds").style.left = g + parseInt(bleft) +"px";
$("ds").style.top = r + parseInt(btop) +"px";
colorrefreshv(r,g);
colorrefresh(b);
}

function move(e){
e = (e) ? e : ((window.event) ? window.event : "");
if (d.className=='arrows') {
    var xs,ys;
    xs = e.clientX -5;
    if (xs<bleft) xs = bleft;
	if (xs>255+bleft) xs = 255+bleft;
        d.style.left = xs  + "px";	
        g = xs -bleft;
	
	ys = e.clientY +document.documentElement.scrollTop-5
	if (ys<btop) ys = btop;
	if (ys>255+btop) ys = 255+btop;
	
	    d.style.top  = ys + "px";
	    r = ys - btop;	
   output();  	
}
else
{ 
	var y_y = e.clientY+document.documentElement.scrollTop;
	
	
	if (y_y<ctop) y_y = ctop;
	if (y_y>255+ctop) y_y = 255+ctop;
	d.style.top  = y_y  + "px";
	b = y_y-ctop;
  // $("test").innerHTML =  $("test").innerHTML +"<br>"+" y_y "+y_y+ " e.clientY "+ e.clientY + " offtop " + offtop + " ctop " +ctop + " b  "+ b;
	output();	
    
 } 
  return false; 
  
}


var r=0,g=0,b=0;
function down(e){
e = (e) ? e : ((window.event) ? window.event : "");
var temp = getTargetElement(e); 

if ((temp.className=="arrows")||(temp.parentNode.className=="arrowboxd")) {

d = (temp.className=="arrows") ? temp : temp.parentNode;

document.onmousemove = move;
return false; }

else
d = null;
}

function up(){
if ((d!=null) && (d.className=="arrowboxd")) {
colorrefresh(b);}

if ((d!=null) && (d.className=="arrows")) {
colorrefreshv(r,g);
}
document.onmousemove = null;
d=null;
}

   
function clickbar(e){
e = (e) ? e : ((window.event) ? window.event : "");
var yy = e.clientY -7; 
$("dv").style.top = yy +"px";
b = yy-ctop;
output();
colorrefresh(b);
}

function inputact(e){
e = (e) ? e : ((window.event) ? window.event : "");
var el = getTargetElement(e); 
if ((el.id=="h")||(el.id=="s")||(el.id=="v")) {
var h = $("h").value;var s = $("s").value;var v = $("v").value;
if (h>359) h=359;
if (h<0) h=0;
if (s>100) s=100;
if (s<0) s = 0;
if (v>100) v=100;
if (v<0) v= 0;

s = s/100;v=v/100;
var vrgb = hsvToRgb(h,s,v);
var color = new RGBColor(vrgb);
if (color.ok==true) {
el.parentNode.nextSibling.innerHTML="";

r = color.r;
g = color.g;
b = color.b;
$("r").value = r;
$("g").value = g;
$("b").value = b;
$("hex").value =color.toHex();

$("nm").value = color.name;
$("clbx").style.backgroundColor = color.toHex();


gopos();
}

}
else if (el.id=="nm") {
var strcolor = el.value;
var color = new RGBColor(strcolor);
if (color.ok==true) {
el.parentNode.nextSibling.innerHTML="";

r = color.r;
g = color.g;
b = color.b;
$("r").value = r;
$("g").value = g;
$("b").value = b;
$("hex").value =color.toHex();

$("nm").value = color.name;
$("clbx").style.backgroundColor = color.toHex();

var hsv = color.toHsv();
$("h").value = hsv[0];
$("s").value = hsv[1];
$("v").value = hsv[2];

gopos();
}

}

else if (el.id=="hex") {
var strcolor = el.value;
var color = new RGBColor(strcolor);
if (color.ok==true) {
el.parentNode.nextSibling.innerHTML="";

r = color.r;
g = color.g;
b = color.b;
$("r").value = r;
$("g").value = g;
$("b").value = b;


output();
gopos();

}else
el.parentNode.nextSibling.innerHTML="x";

}
else
{
if (isNaN(el.value)||(el.value<0)||(el.value>255)) {
el.parentNode.nextSibling.innerHTML="x";
}
else
{
el.parentNode.nextSibling.innerHTML="";

var rgb = "rgb("+$("r").value+","+$("g").value+","+$("b").value+")";
var color = new RGBColor(rgb);
if (color.ok==true) {
r = $("r").value;
g = $("g").value;
b = $("b").value;

gopos();
output();
}
}
}
}

function output() {
var rgb = "rgb("+r+","+g+","+b+")";
$("clbx").style.backgroundColor = rgb;
$("r").value = r;
$("g").value = g;
$("b").value = b;
var color = new RGBColor(rgb);
var hexcolor = color.toHex();
$("hex").value = hexcolor;
//$("hex").value = rgbtohex(rgb);
var color = new RGBColor(hexcolor);
$("nm").value = (color.name!=undefined) ? color.name : "";

var hsv = color.toHsv();
$("h").value = hsv[0];
$("s").value = hsv[1];
$("v").value = hsv[2];
}

function clicksquare(e){
e = (e) ? e : ((window.event) ? window.event : "");

	var xs = e.clientX -5;
        $("ds").style.left = xs  + "px";	
        g = xs -bleft;
	
	var ys = e.clientY -5
		
	    $("ds").style.top  = ys + document.documentElement.scrollTop+"px";
	    r = ys - btop;
		output();
		colorrefreshv(r,g);

}

function Draggable(item,wd,mn, mx,unt){
	if (item=="dv") {
	var pos_wt = getElementPosition($("wt"));
	
	$(item).style.left = pos_wt[0]+8+"px";
	ctop = pos_wt[1]-7;
	$(item).style.top =ctop+"px";
	
	var dd = $$($("wt"),"em");
	for (var i=0; i <dd.length; i++){
	dd[i].onclick = clickbar;
	}
	}
	if (item=="ds") {
	var pos_wt = getElementPosition($("wp"));
	bleft=pos_wt[0]
	$(item).style.left = bleft+"px";
	btop = pos_wt[1];
	$(item).style.top =btop+"px";
	$("wp").onclick = clicksquare;
		
	}
	
   var inputs = $('r','g','b','hex','h','s','v','nm');
    for (var i=0; i < inputs.length; i++) {
        inputs[i].onkeyup = inputact;
      
    }
    
    
   	return false;
}


function slider(id) {
    this.id=id;
    this.b = function() {
    var d;
    var y,x,dy,dx,ctop,btop,bleft;
  
    Draggable(this.id);
    
    document.onmousedown = down;
	document.onmouseup = up;
    }    
       
}

function startdrag() {
var drg1 = new slider("dv");
drg1.b();
var drg2 = new slider("ds");
drg2.b();
}

function getstyle(elem, prop) {
		if(document.defaultView)
		{
			return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
		}
		else if(elem.currentStyle)
		{
			var prop = prop.replace(/-(\w)/gi, function($0,$1)
			{
				//return $0.charAt($0.length - 1).toUpperCase();
				return $1.toUpperCase();
			});
			return elem.currentStyle[prop];
		}
		else return null;
	}
	
function getoffset(el) {
var curLeft = 0;   
var curTop = 0; 

if (el.offsetParent) { 
	el = el.offsetParent
        do {   
            curLeft += el.offsetLeft;  
            curTop += el.offsetTop;   
            
        } while (el = el.offsetParent); 
     return [curLeft,curTop];
  }

}	
	
	
function getElementPosition(el)   
{   
    var curLeft = 0;   
    var curTop = 0;   
   // var corrections = calcPositionCorrection(el);   
  
    if (el.offsetParent)   
    {   
        do {   
            curLeft += el.offsetLeft;  
         
            curTop += el.offsetTop;   
        } while (el = el.offsetParent);   
        return [ curLeft, curTop ]; 
     //   return [ (curLeft - corrections[0]), (curTop - corrections[1]) ];   
    }   
} 

  
function calcPositionCorrection(el)   
{   
    var curX = 0;   
    var curY = 0;   
    do {   
        curX += el.scrollLeft;   
        curY += el.scrollTop;   
        if (el.nodeName == 'BODY')   
            break;   
    } while (el = el.parentNode);   
    return [curX, curY];   
}  


function adda() {
var color = new RGBColor("red");
var n=0;         
for (var key in color.simple_colors) {
	n++;  
}

var m = parseInt(n/4);

var lfts= getElementsByClass("lft");
var i = 0;


for (var key in color.simple_colors) {
	if (i<m) {
	createlink(lfts[0],color.simple_colors[key],key);
	i++;
	}
	
	if ((i>m-1)&&(i<2*m)) {
	if (i>m){
	createlink(lfts[1],color.simple_colors[key],key);
	}	
	i++;
		
	}
	if ((i>2*m-1)&&(i<3*m)) {
	if (i>2*m){
	createlink(lfts[2],color.simple_colors[key],key);
	}
	i++;
	}
	if ((i>3*m-1)&&(i<4*m)) {
	if (i>3*m)	{
	createlink(lfts[3],color.simple_colors[key],key);
	}
	i++;
	
	}
}

}

function colorname(txt){

var el = $("nm");
el.value = txt;

var color = new RGBColor(txt);
if (color.ok==true) {
el.parentNode.nextSibling.innerHTML="";

r = color.r;
g = color.g;
b = color.b;
$("r").value = r;
$("g").value = g;
$("b").value = b;
$("hex").value =color.toHex();
$("nm").value = color.name;
var hexcolor = color.toHex();
$("clbx").style.backgroundColor = hexcolor;
var hsv = color.toHsv();
$("h").value = hsv[0];
$("s").value = hsv[1];
$("v").value = hsv[2];
gopos();
var wwpp= getElementsByClass("wrapper");
wwpp[0].style.backgroundColor = hexcolor;
var n1 = wwpp[0].nextSibling;
var n2 = n1.nextSibling;
var n3 = n2.nextSibling;
var n4 = n3.nextSibling;
var n5 = n4.nextSibling;
n1.style.backgroundColor = hexcolor;
n2.style.backgroundColor = hexcolor;
n3.style.backgroundColor = hexcolor;
n4.style.backgroundColor = hexcolor;
n5.style.backgroundColor = hexcolor;

var p1= wwpp[0].previousSibling;
var p2 =p1.previousSibling;
var p3 = p2.previousSibling;
var p4 = p3.previousSibling;
var p5 = p4.previousSibling;

p1.style.backgroundColor = hexcolor;
p2.style.backgroundColor = hexcolor;
p3.style.backgroundColor = hexcolor;
p4.style.backgroundColor = hexcolor;
p5.style.backgroundColor = hexcolor;

}

}

function createlink(e,hexcl,cltxt) {
var a = document.createElement("a");	
	a.href ="javascript:colorname('"+cltxt+"')";
	var dsq=document.createElement("div");
	dsq.className = "cl";
	dsq.style.backgroundColor ="#"+hexcl;
	a.appendChild(dsq);
	 
	var dnm = document.createElement("div");
	dnm.appendChild(document.createTextNode(cltxt));
	a.appendChild(dnm);
	e.appendChild(a);

}

function socialbkmk() {
var u = location.href;
var t = document.title;
location.href = 'http://www.pagecolumn.com/social_bookmark2.htm?pgcoluu='+u+'&pgcoltt='+t;
} 	
	</script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
</head>
<body>
<div class="out">
<div class="aa51 dh"></div> <div class="a52 dh"></div><div class="a53 dh"></div><div class="a54 dh"></div><div class="a55 dh"></div>
<div class="header"><h2>Color Picker and Names</h2>
<div class="subhd">Test RGB, HSV, Hex colors and defined names online</div>
</div>
<div class="a55 dh"></div><div class="a54 dh"></div><div class="a53 dh"></div><div class="a52 dh"></div><div class="aa51 dh"></div>
<div style="clear:both;height:10px"></div>
<div class="pic">
<div class="wl"> <div class="la">
<div id="wp"></div><div class="arrows" id="ds"></div>
</div>
<div class="ra">
<div id="wt"></div>
<div class="arrowboxd" id="dv"> <div class="z7"></div> <div class="z6"></div> <div class="z5"></div>
 <div class="z4"></div> <div class="z3"></div> <div class="z2"></div> <div class="z1"></div> <div class="z2"></div> 
 <div class="z3"></div> <div class="z4"></div> <div class="z5"></div> <div class="z6"></div> <div class="z7"></div> </div>
</div>
<div class="rr"><div class="rrl">R </div><div class="rrr"><input id="r" type="text" /></div><div class="rra"></div>
<div class="rrl">G </div><div class="rrr"><input id="g" type="text" /></div><div class="rra"></div>
<div class="rrl">B </div><div class="rrr"><input id="b" type="text" /></div><div class="rra"></div>
<div class="rrw"><input id="hex" type="text" /></div><div class="rra"></div>
<div class="rrw" ><input id="nm" type="text" /></div><div class="rra"></div>
<div id="clbx"></div>
</div>
<div class="hsv">
<div class="rrl">H </div><div class="rrr"><input id="h" type="text" /><sup>o</sup></div><div class="rra"></div>
<div class="rrl">S </div><div class="rrr"><input id="s" type="text" />%</div><div class="rra"></div>
<div class="rrl">V </div><div class="rrr"><input id="v" type="text" />%</div><div class="rra"></div>
</div>
</div> 
</div>
<div style="clear:both"></div>
<div class="a55 dh"></div><div class="a54 dh"></div><div class="a53 dh"></div><div class="a52 dh"></div><div class="aa51 dh"></div>
<div style="clear:both;height:10px"></div>
<div class="aa51 dh"></div><div class="a52 dh"></div><div class="a53 dh"></div><div class="a54 dh"></div><div class="a55 dh"></div><div class="wrapper">
	     <div class="lft" id="lft1"></div>
	     <div class="lft"> </div>
	     <div class="lft"></div>
	     <div class="lft"></div> 
</div><div class="a55 dh"></div><div class="a54 dh"></div><div class="a53 dh"></div><div class="a52 dh"></div><div class="aa51 dh"></div>
<div class="footer">Last updated on Nov.2, 2009. <a href="http://www.pagecolumn.com/">Pagecolumn.com</a></div>
</div>

</body>
</html>
